<style>
    #flow-diagram {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 200;
    }
</style>

<div id="flow-diagram"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.22.0/cytoscape.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
   fetch("{% url 'flow-diagram' object.pk %}")
    .then((response) => response.json())
    .then((json) => {
      const cy = cytoscape({
        container: document.getElementById('flow-diagram'),
        elements: {
            "nodes": json.elements.nodes,
            "edges": json.elements.edges,
        },
        userZoomingEnabled: false,
        style: [
          {
            selector: "node",
            style: {
              "background-color": "#fff",
              "border-width": "2px",
              "border-style": "solid",
              "border-color": "black",
              shape: "roundrectangle",
              width: "234px",
              height: "60px",
              "text-valign": "center",
              "text-halign": "center",
              label: "data(label)",
            },
          },
          {
            selector: "edge",
            style: {
              width: 3,
              "line-color": "black",
              "target-arrow-color": "black",
              "target-arrow-shape": "triangle",
              "arrow-scale": 2,
              "curve-style": "bezier",
            },
          },
          {
            selector: "node[?start]",
            style: {
              "background-color": "#5694ca",
              "color": "white",
            },
          },
          {
            selector: "node[?end][?done]",
            style: {
              "background-color": "#00703c",
              "color": "white",
            },
          },
          {
            selector: "node[?decision]",
            style: {
              shape: "diamond",
              height: "100px",
            },
          },
          {
            selector: "node[?done][!start][!end]",
            style: {
              "background-color": "lightgray",
            },
          },
          {
            selector: "node[?current]",
            style: {
              "border-width": "4px",
                "background-color": "#f47738",
                "color": "white",
            },
          }
        ],
        layout: {
          name: "breadthfirst",
          directed: true,
          roots: ["create_requirement"],
          // fit: false,
          spacingFactor: 1,
          padding: 0,
          // nodeDimensionsIncludeLabels: true,
        },
      });
    });
</script>
